<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  <link rel="stylesheet" href="x-admin/css/font.css">
  <link rel="stylesheet" href="x-admin/css/xadmin.css">
  <script type="text/javascript" src="x-admin/js/jquery.min.js"></script>
  <script src="x-admin/lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="x-admin/js/xadmin.js"></script>
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

  <style>
    .layui-disabled, .layui-disabled:hover {
      color: #423f3f !important;
    }
  </style>
</head>
<body style="padding: 20px;width: 90%">
<div>
  <form id="edit" lay-filter="edit" class="layui-form">
    <input type="hidden" name="id" id="id" value="<%= apply.id %>">
    <div class="exam-info">
      <div class="layui-form-item">
        <label class="layui-form-label">当前进度</label>
        <div class="layui-input-block">
          <% if(apply.exam_status === 10){ %>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">已申请</button>
          <% }else if(apply.exam_status === 11){ %>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-warm">已取消</button>
          <% }else if(apply.exam_status === 20){ %>
            <button type="button" class="layui-btn layui-btn-sm">部门同意</button>
          <% }else if(apply.exam_status === 21){ %>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">部门拒绝</button>
          <% }else if(apply.exam_status === 30){ %>
            <button type="button" class="layui-btn layui-btn-sm">同意用车</button>
          <% }else if(apply.exam_status === 31){ %>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">拒绝用车</button>
          <% }else{ %>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">已还车</button>
          <% } %>
        </div>
      </div>
    </div>
    <div class="apply-info">
      <div class="layui-form-item">
        <label class="layui-form-label" for="start_time"><span class="x-red">*</span>用车时间</label>
        <div class="layui-input-block">
          <input type="text" readonly value="<%= apply.start_time %>" lay-verify="required" id="start_time"
                 name="start_time" placeholder="选择用车时间" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" for="end_time"><span class="x-red">*</span>还车时间</label>
        <div class="layui-input-block">
          <input type="text" readonly id="end_time" lay-verify="required" value="<%= apply.end_time %>" name="end_time"
                 placeholder="选择还车时间" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label" for="apply_car_id">选择车辆</label>
        <div class="layui-input-block">
          <select name="apply_car_id" id="apply_car_id">
            <option value="">任意车辆</option>
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label" for="is_driver">是否自驾</label>
        <div class="layui-input-block">
          <select name="is_driver" id="is_driver" lay-filter="is_driver">
            <option value="1">自驾</option>
            <option value="2">司机</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item driver">
        <label class="layui-form-label" for="apply_driver_id">选择司机</label>
        <div class="layui-input-block">
          <select name="apply_driver_id" id="apply_driver_id">
            <option value="">任意司机</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" for="apply_content"><span class="x-red">*</span>用车事由</label>
        <div class="layui-input-block">
        <textarea placeholder="请输入用车事由" lay-verify="required" id="apply_content" name="apply_content"
                  class="layui-textarea"><%= apply.apply_content %></textarea>
        </div>
      </div>
      <div class="layui-form-item apply-btn">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
          <button class="layui-btn" type="submit" lay-submit lay-filter="submitBtn">提交</button>
        </div>
      </div>
    </div>
    <div class="department">
      <div class="layui-form-item">
        <label class="layui-form-label">部门审核</label>
        <div class="layui-input-block"></div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" for="exam_dcontent"><span class="x-red">*</span>审核意见</label>
        <div class="layui-input-block">
        <textarea placeholder="请输入审核意见" id="exam_dcontent" name="exam_dcontent"
                  class="layui-textarea"><%= apply.exam_dcontent %></textarea>
        </div>
      </div>
      <%
      if(apply.exam_status == "20" || apply.exam_status == "21"){
      %>
      <div class="layui-form-item">
        <label class="layui-form-label">审核人</label>
        <div class="layui-input-block">
          <input type="text" disabled class="layui-input" value="<%= apply.fname %>">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">审核时间</label>
        <div class="layui-input-block">
          <input type="text" disabled class="layui-input" value="<%= apply.exam_dtime %>">
        </div>
      </div>
      <% } %>
      <div class="layui-form-item department-btn">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-normal" type="submit" lay-submit lay-filter="depSuccess">同意</button>
          <button class="layui-btn layui-btn-danger" type="submit" lay-submit lay-filter="depError">拒绝</button>
        </div>
      </div>
    </div>
    <div class="admin">
      <div class="layui-form-item">
        <label class="layui-form-label">管理员审核</label>
        <div class="layui-input-block"></div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" for="exam_acontent"><span class="x-red">*</span>审核意见</label>
        <div class="layui-input-block">
        <textarea placeholder="请输入审核意见" id="exam_acontent" name="exam_acontent"
                  class="layui-textarea"><%= apply.exam_acontent %></textarea>
        </div>
      </div>
      <%
      if(apply.exam_status == "30" || apply.exam_status == "31"){
      %>
      <div class="layui-form-item">
        <label class="layui-form-label">审核人</label>
        <div class="layui-input-block">
          <input type="text" disabled class="layui-input" value="<%= apply.gname %>">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">审核时间</label>
        <div class="layui-input-block">
          <input type="text" disabled class="layui-input" value="<%= apply.exam_atime %>">
        </div>
      </div>
      <% } %>

      <div class="layui-form-item admin-btn">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-normal" type="button" id="adminBtn">同意</button>
          <button class="layui-btn layui-btn-danger" type="submit" lay-submit lay-filter="adminError">拒绝</button>
        </div>
      </div>
      <div class="admin-driver">
        <div class="layui-form-item">
          <label class="layui-form-label" for="car_id">指定车辆</label>
          <div class="layui-input-block">
            <select name="car_id" id="car_id">
              <option value="">[选择车辆]</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label" for="driver_id">指定司机</label>
          <div class="layui-input-block">
            <select name="driver_id" id="driver_id">
              <option value="">[选择司机]</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item admin-btn">
          <label class="layui-form-label"></label>
          <div class="layui-input-block">
            <button class="layui-btn" type="submit" lay-submit lay-filter="adminSuccess">提交</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
</body>
<script>
  var form;
  layui.use(["form", 'laydate'], function () {
    form = layui.form;
    const laydate = layui.laydate;

    /*获取当前用户的权限*/
    let power = "<%= loginInfo.power %>"
    /*获取页面展示的类型：添加(apply)/修改(update)/审核(exam)/详情(detail)*/
    let type = "<%= type %>";
    if (type === "apply") {
      /*渲染开始时间和结束时间*/
      laydate.render({
        elem: "#start_time",
        type: "datetime",
        min: new Date().getTime(),
        done(st, date) {
          const minTime = date.year + "-" + date.month + "-" + date.date + " " + (date.hours + 1) + ":" + date.minutes + ":" + date.seconds;
          $("#end_time").val("");
          laydate.render({
            elem: "#end_time",
            type: "datetime",
            min: minTime,
            done(et) {
              getCarSelect("apply_car_id")
            }
          })
        }
      });
      /*司机列表默认隐藏*/
      $(".driver").hide();
      /*监听是否自驾下拉框*/
      form.on("select(is_driver)", function ({value}) {
        if (value == 1) {
          $(".driver").hide();
        } else {
          $(".driver").show();
          getDriverSelect("apply_driver_id")
        }
      });
      /*隐藏其他行为的表单*/
      $(".exam-info").hide();
      $(".department").hide();
      $(".admin").hide();
    } else {//修改/详情/审核通用逻辑
      /*渲染开始时间和结束时间*/
      laydate.render({
        elem: "#start_time",
        type: "datetime",
        min: new Date().getTime(),
        done(st, date) {
          const minTime = date.year + "-" + date.month + "-" + date.date + " " + (date.hours + 1) + ":" + date.minutes + ":" + date.seconds;
          $("#end_time").val("");
          laydate.render({
            elem: "#end_time",
            type: "datetime",
            min: minTime
          })
        }
      });
      getCarSelect("apply_car_id", "<%= apply.apply_car_id %>");
      /*设置申请司机信息*/
      let is_driver = "<%= apply.is_driver %>";
      $("#is_driver").val(is_driver);//是否自驾选择框绑定
      form.render();
      /*设置初始情况下是否显示司机选择列表*/
      if (is_driver == 2) {
        $(".driver").show();
        getDriverSelect("apply_driver_id", "<%= apply.apply_driver_id %>")
      } else {
        $(".driver").hide();
      }
      /*监听是否自驾下拉框*/
      form.on("select(is_driver)", function ({value}) {
        if (value == 1) {
          $(".driver").hide();
        } else {
          $(".driver").show();
          getDriverSelect("apply_driver_id")
        }
      });
      if (type === "update") {
        /*隐藏其他行为的表单*/
        $(".exam-info").hide();
        $(".department").hide();
        $(".admin").hide();
      } else if (type === "detail") {
        getCarSelect("car_id", "<%= apply.car_id %>")
        getDriverSelect("driver_id", "<%= apply.driver_id %>")
        $("#edit input").prop("disabled", true);
        $("#edit textarea").prop("disabled", true);
        $("#edit select").prop("disabled", true);
        $(".apply-btn,.department-btn,.admin-btn").hide();
        $(".exam-info").show();
      } else {
        $(".exam-info").hide();//隐藏审核进度
        $(".admin").hide();//隐藏管理员审核表单
        $(".apply-btn").hide();//隐藏申请表单的按钮
        $(".apply-info input").prop("disabled", true);
        $(".apply-info textarea").prop("disabled", true);
        $(".apply-info select").prop("disabled", true);
        if (power == 1) {
          $(".admin").show();//显示管理员审核表单
          $(".department-btn").hide();//隐藏部门审核按钮
          $(".department input").prop("disabled", true);
          $(".department textarea").prop("disabled", true);
          $(".department select").prop("disabled", true);
          $(".admin-driver").hide();//默认隐藏指定司机和指定车辆
          /*管理员同意后进行车辆和司机的指派*/
          $("#adminBtn").click(function () {
            $(".admin-driver").show();
            getCarSelect("car_id", $("#apply_car_id").val());
            getDriverSelect("driver_id", $("#apply_driver_id").val());
          })
        }
      }
    }

    /*监听添加和修改按钮*/
    form.on("submit(submitBtn)", function ({field}) {
      const url = "apply/update";
      const msg = field.id ? "修改成功" : "添加成功"
      submitForm(url, field, msg)
      return false;
    });
    /*部门审核通过*/
    form.on("submit(depSuccess)", function ({field}) {
      const url = "apply/dep/exam";
      const params = {
        id: field.id,
        exam_dcontent: field.exam_dcontent ? field.exam_dcontent : "同意",
        exam_status: 20
      }
      submitForm(url, params)
      return false;
    })
    /*部门审核拒绝*/
    form.on("submit(depError)", function ({field}) {
      const url = "apply/dep/exam";
      const params = {
        id: field.id,
        exam_dcontent: field.exam_dcontent ? field.exam_dcontent : "拒接",
        exam_status: 21
      }
      submitForm(url, params)
      return false;
    })
    /*管理员审核同意*/
    form.on("submit(adminSuccess)", function ({field}) {
      if (!field.car_id) {
        layer.msg("请指派车辆", {icon: 5});
        return false;
      }
      if (field.is_driver == 2) {
        if (!field.driver_id) {
          layer.msg("请指派司机", {icon: 5});
          return false;
        }
      }
      const url = "apply/admin/exam";
      const params = {
        id: field.id,
        exam_acontent: field.exam_acontent ? field.exam_acontent : "同意",
        exam_status: 30,
        car_id: field.car_id,
        driver_id: field.driver_id
      }
      submitForm(url, params)
      return false;
    })
    /*管理员审核同意*/
    form.on("submit(adminError)", function ({field}) {
      const url = "apply/admin/exam";
      const params = {
        id: field.id,
        exam_acontent: field.exam_acontent ? field.exam_acontent : "拒接",
        exam_status: 31
      }
      submitForm(url, params)
      return false;
    })
  });

  /*提交表单*/
  function submitForm(url, field) {
    $.ajax({
      url,
      data: field,
      method: "post",
      dataType: "json",
      success(res) {
        if (res.code === 200) {
          layer.msg("操作成功", {icon: 6}, function () {
            if ("<%= type %>" === "apply") {
              parent.xadmin.add_tab("申请记录", "apply/list", true)
              location.reload()
            } else {
              const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
              parent.layer.close(index); //再执行关闭
              parent.table.reload("dataList")
            }
          });
        } else {
          layer.alert(res.msg, {icon: 5});
        }
      }
    });
  }

  /*加载车辆下拉框*/
  function getCarSelect(divId, selectCarId) {
    $.ajax({
      url: "car/select",
      method: "get",
      success(res) {
        if (res.code === 200) {
          const freeList = getFreeInfo();
          let $html = "";
          for (const car of res.data) {
            let selected = "";
            let disabled = "";
            for (const free of freeList) {
              if (car.id == free.car_id) {
                disabled = "disabled";
                break;
              }
            }
            if (car.id == selectCarId) {
              selected = "selected"
            }
            $html += '<option ' + selected + ' ' + disabled + ' value="' + car.id + '">' + car.car_no + '</option>';
          }
          $("#" + divId + " option:first").after($html);
          form.render();
        }
      }
    });


  }

  /*加载司机下拉框*/
  function getDriverSelect(divId, selectDriverId) {
    $.ajax({
      url: "userinfo/driver/select",
      method: "get",
      success(res) {
        if (res.code === 200) {
          const freeList = getFreeInfo();
          let $html = "";
          for (const user of res.data) {
            let selected = "";
            let disabled = "";
            for (const free of freeList) {
              if (user.id == free.driver_id) {
                disabled = "disabled";
              }
            }
            if (user.id == selectDriverId) {
              selected = "selected";
            }
            $html += '<option ' + disabled + ' ' + selected + ' value="' + user.id + '">' + user.nickname + '</option>';
          }
          $("#" + divId + " option:first").after($html);
          form.render();
        }
      }
    });
  }

  function getFreeInfo() {
    let resultDate = [];
    $.ajax({
      url: "apply/free",
      method: "get",
      async: false,/*设置代码是否异步*/
      data: {
        start_time: $("#start_time").val(),
        end_time: $("#end_time").val()
      },
      dataType: "json",
      success(res) {
        if (res.code === 200) {
          resultDate = res.data
        }
      }
    })
    return resultDate;
  }
</script>
</html>
